<template>
  <view class="container">
    <!-- 页面标题 - 固定在顶部 -->
    <view class="page-header">
      <view class="back-btn" @click="goBack">
        <FeatherIcon name="chevron-left" size="24" color="#333"></FeatherIcon>
      </view>
      <text class="page-title">我的背包</text>
    </view>

    <!-- 内容区域 -->
    <view class="content-area">
      <!-- 加载中状态 -->
      <view class="loading" v-if="loading">
        <FeatherIcon
          name="loader"
          size="42"
          color="#999"
          class="loading-icon"
        />
        <text>加载中...</text>
      </view>

      <!-- 无道具状态 -->
      <view class="empty-state" v-else-if="bagItems.length === 0">
        <image
          src="/static/empty-bag.png"
          mode="aspectFit"
          class="empty-icon"
        ></image>
        <text class="empty-text">背包空空如也~</text>
        <text class="empty-hint">快去摸鱼广场获取道具吧</text>
      </view>

      <!-- 道具列表 -->
      <view class="items-list" v-else>
        <view
          class="item-card"
          v-for="(item, index) in bagItems"
          :key="index"
          @click="showItemDetail(item)"
        >
          <image
            class="item-icon"
            :src="item.imgUrl || '/static/default-item.png'"
            mode="aspectFit"
          ></image>
          <view class="item-info">
            <text class="item-name">{{ item.name }}</text>
            <text class="item-desc">{{ item.description }}</text>
            <view class="item-meta">
              <text class="item-count">数量: {{ item.count }}</text>
              <text class="item-type">{{ getItemTypeName(item.type) }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 道具详情弹窗 -->
    <view class="item-detail-modal" v-if="showDetailModal">
      <view class="modal-overlay" @click="closeItemDetail"></view>
      <view class="modal-content">
        <view class="modal-header">
          <text class="modal-title">道具详情</text>
          <text class="modal-close" @click="closeItemDetail">×</text>
        </view>
        <view class="modal-body">
          <image
            class="detail-icon"
            :src="currentItem.imgUrl || '/static/default-item.png'"
            mode="aspectFit"
          ></image>
          <text class="detail-name">{{ currentItem.name }}</text>
          <text class="detail-type">{{
            getItemTypeName(currentItem.type)
          }}</text>
          <text class="detail-desc">{{ currentItem.description }}</text>
          <view class="detail-info">
            <text class="info-item">拥有数量: {{ currentItem.count }}</text>
            <text class="info-item"
              >获取时间: {{ formatTime(currentItem.time) }}</text
            >
          </view>
        </view>
        <view class="modal-footer">
          <button
            class="modal-btn use-btn"
            @click="useItem"
            v-if="canUseItem(currentItem)"
          >
            使用道具
          </button>
          <button class="modal-btn cancel-btn" @click="closeItemDetail">
            关闭
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import FeatherIcon from "@/components/FeatherIcon.vue";
import api from "@/api";

// 状态变量
const loading = ref(false);
const bagItems = ref([]);
const userName = ref("");
const showDetailModal = ref(false);
const currentItem = ref({});

// 获取URL参数
onLoad((options) => {
  if (options.userName) {
    userName.value = options.userName;
    fetchBagItems();
  } else {
    showError("用户名参数缺失");
  }
});

// 获取背包道具
const fetchBagItems = async () => {
  if (!userName.value) return;

  loading.value = true;
  try {
    const res = await api.user.getUserBag(userName.value);
    if (res.code === 0 && res.data) {
      bagItems.value = res.data.items || [];
    } else {
      showError(res.msg || "获取背包道具失败");
    }
  } catch (error) {
    console.error("获取背包道具失败", error);
    uni.showToast("获取背包道具失败");
  } finally {
    loading.value = false;
  }
};

// 显示道具详情
const showItemDetail = (item) => {
  currentItem.value = item;
  showDetailModal.value = true;
};

// 关闭道具详情
const closeItemDetail = () => {
  showDetailModal.value = false;
};

// 使用道具
const useItem = async () => {
  uni.showToast("正在开发中...");
  // 这里可以添加使用道具的逻辑
  closeItemDetail();
};

// 判断道具是否可以使用
const canUseItem = (item) => {
  // 根据道具类型判断是否可使用
  return item.type === "CONSUMABLE" && item.count > 0;
};

// 获取道具类型名称
const getItemTypeName = (type) => {
  const typeMap = {
    CONSUMABLE: "消耗品",
    EQUIPMENT: "装备",
    COLLECTIBLE: "收藏品",
    MATERIAL: "材料",
    OTHER: "其他",
  };
  return typeMap[type] || "未知类型";
};

// 格式化时间
const formatTime = (timestamp) => {
  if (!timestamp) return "未知时间";

  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  const hours = String(date.getHours()).padStart(2, "0");
  const minutes = String(date.getMinutes()).padStart(2, "0");

  return `${year}-${month}-${day} ${hours}:${minutes}`;
};

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 页面加载时获取背包道具
onMounted(() => {
  if (userName.value) {
    fetchBagItems();
  }
});
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.page-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px 15px;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 100;

  .back-btn {
    position: absolute;
    left: 20px;
    padding: 10rpx;
    padding-bottom: 0;
  }

  .page-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
  }
}

.content-area {
  padding-top: 80px; /* 为固定的header腾出空间 */
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20rpx;
}

/* 加载中样式 */
.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400rpx;

  text {
    margin-top: 20rpx;
    font-size: 28rpx;
    color: #999;
  }

  .loading-icon {
    animation: rotate 1s linear infinite;
  }
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;

  .empty-icon {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 30rpx;
  }

  .empty-text {
    font-size: 32rpx;
    color: #666;
    margin-bottom: 16rpx;
  }

  .empty-hint {
    font-size: 26rpx;
    color: #999;
  }
}

/* 道具列表样式 */
.items-list {
  .item-card {
    display: flex;
    background-color: #fff;
    margin-bottom: 20rpx;
    border-radius: 12rpx;
    padding: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

    .item-icon {
      width: 120rpx;
      height: 120rpx;
      border-radius: 8rpx;
      margin-right: 20rpx;
    }

    .item-info {
      flex: 1;
      display: flex;
      flex-direction: column;

      .item-name {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 10rpx;
      }

      .item-desc {
        font-size: 26rpx;
        color: #666;
        line-height: 1.4;
        margin-bottom: 16rpx;
        /* 多行文本省略 */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }

      .item-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .item-count {
          font-size: 24rpx;
          color: #ff9800;
          font-weight: bold;
        }

        .item-type {
          font-size: 24rpx;
          color: #999;
          background-color: #f0f0f0;
          padding: 4rpx 16rpx;
          border-radius: 20rpx;
        }
      }
    }
  }
}

/* 道具详情弹窗 */
.item-detail-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;

  .modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
  }

  .modal-content {
    position: relative;
    z-index: 2;
    width: 80%;
    max-width: 600rpx;
    background-color: #fff;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.2);
    animation: modalFadeIn 0.3s ease-out;
  }

  .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx;
    border-bottom: 1px solid #f0f0f0;

    .modal-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }

    .modal-close {
      font-size: 40rpx;
      color: #999;
      cursor: pointer;
    }
  }

  .modal-body {
    padding: 40rpx 30rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    .detail-icon {
      width: 160rpx;
      height: 160rpx;
      border-radius: 8rpx;
      margin-bottom: 30rpx;
    }

    .detail-name {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 10rpx;
    }

    .detail-type {
      font-size: 24rpx;
      color: #999;
      background-color: #f0f0f0;
      padding: 4rpx 16rpx;
      border-radius: 20rpx;
      margin-bottom: 20rpx;
    }

    .detail-desc {
      font-size: 28rpx;
      color: #666;
      line-height: 1.5;
      text-align: center;
      margin-bottom: 30rpx;
    }

    .detail-info {
      width: 100%;

      .info-item {
        display: block;
        font-size: 26rpx;
        color: #999;
        margin-bottom: 10rpx;
      }
    }
  }

  .modal-footer {
    padding: 20rpx 30rpx 30rpx;
    display: flex;
    justify-content: space-between;

    .modal-btn {
      flex: 1;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 28rpx;
      border-radius: 40rpx;

      &:after {
        border: none;
      }
    }

    .use-btn {
      color: #fff;
      background-color: #ff9800;
      margin-right: 20rpx;
    }

    .cancel-btn {
      color: #666;
      background-color: #f0f0f0;
    }
  }
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
